import { CSSProperties, FC, useContext } from "react";
import styles from "./index.module.less";
import classNames from "classnames";

export type FooterCardType = "active" | "disable" | "normal";

export interface IFooterCardCompProps {
  title: string;
  // currentKey?: CurrentKey;
  onClick?: () => void;
  type: FooterCardType;
  isAutoFontSize?: boolean;
  style?: CSSProperties;
  footerStyle?: CSSProperties;
}

const FooterCardComp: FC<IFooterCardCompProps> = (
  props: IFooterCardCompProps
) => {
  const getClassName = () => {
    switch (props.type) {
      case "active":
        return classNames([styles["footer-card"], styles["is-active"]]);
      case "disable":
        return classNames([styles["footer-card"], styles["display"]]);
      case "normal":
        return classNames(styles["footer-card"]);
      default:
        break;
    }
  };

  return (
    <div style={props.style} className={getClassName()} onClick={props.onClick}>
      <div className={styles["footer-card-body"]}></div>
      <div
        className={styles["content"]}
        style={{
          fontSize: props.isAutoFontSize ? "0.9rem" : 18,
          ...props.footerStyle,
        }}
      >
        {props.title}
      </div>
    </div>
  );
};

export default FooterCardComp;
